<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
    <title></title>

    <style>
      td{
        border:1px solid darkred;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0;
      }
    </style>
  </head>
  <body>

  <div>
    姓名: <input type="text" name="name" id="name">  部门 <input type="text" name="deparmentName" id="deparmentName">
    性别:
    <select name="sex"  id="select">
      <option name="" value="">请选择性别</option>
      <option name="sex" value="1">男</option>
      <option name="sex" value="0">女</option>
    </select>

    <button type="button" id="search">查询</button>
  </div>


  <a href="/user/add"><button id="add">添加</button></a>
  <a href="/user/update"><button id="update">修改</button></a>
  <a href="/user/delete"><button id="delete">删除</button></a>
  <table>
    <tr>
      <th>序号</th>
      <th>用户名</th>
      <th>密码</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>联系电话</th>
      <th>Emall</th>
      <th>部门</th>
      <th>角色</th>
      <th>操作</th>
    </tr>

    <c:forEach items="${pageable.rows}" var="item" varStatus="index">

      <tr>
        <td>${index.index+1}</td>
        <td>${item.uname}</td>
        <td>${item.password}</td>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>
          <c:choose>
            <c:when test="${item.sex eq 1}">男</c:when>
            <c:when test="${item.sex eq 0}">女</c:when>
            <c:otherwise>
              未知
            </c:otherwise>
          </c:choose>
        </td>
        <td>${item.phone}</td>
        <td>${item.emall}</td>
        <td>${item.deparment.name}</td>
        <td>${item.roule}</td>
        <td><a href="/pay?userId=${item.id}">查看</a></td>
    </c:forEach>
  </table>

  <div>
    共<span>${pageable.pageCount}</span>页
    <button id="shang">上一页</button>
    <button id="xia">下一页</button>
    第 <span id="page">${pageable.current}</span>页

   <a href="/index.jsp">返回</a>

  </div>

  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  <script>
    $(function(){
        $("#shang").on('click',function (){
          var page = Number($("#page").html());
          if (page >1){
              location.href = "/user/list?page="+(page-1)+"&size=10";
          }
            });

        $("#xia").on('click',function () {
            var page = Number($("#page").html());
            location.href="/user/list?page="+(page+1)+"&size=10";
        });

        $("#search").on('click',function () {
           var name = $("#name").val();
            var deparmentName = $("#deparmentName").val();
            var sex = $("#select").val();
            location.href="/user/list?name="+name+"&deparmentName="+deparmentName+"&sex="+sex;
        });
    });
  </script>
  </body>
</html>